<template>
  <view class="content">
    <view class="remove">
      <view class="remove-title-clearButton">
        <view class="remove-title">
          <view class="remove-title-content">
            <u--text bold size="18" color="#0081ff" text="快速去水印"></u--text>
          </view>
          <view class="remove-title-shadow">
            <u--text bold color="#0081ff" text="SPEEDY"></u--text>
          </view>
        </view>
        <view class="remove-clearButton">
          <u--text @click="clearTextarea" text="清空"></u--text>
        </view>
      </view>
      <view class="remove-textarea">
        <u--textarea
          maxlength="180"
          border="none"
          height="140"
          v-model="input_url"
          placeholder="请粘贴需要提取的视频/图集链接"
        ></u--textarea>
      </view>
      <view class="remove-paste-submit-button">
        <view class="remove-paste-button">
          <u-button @click="pasteURL" type="primary" plain text="粘贴链接"></u-button>
        </view>
        <view class="remove-submit-button">
          <u-button @click="getAnalysisDate" type="primary" text="立即解析"></u-button>
        </view>
      </view>
    </view>
    <view class="ad-show" v-if="isOpenAd">
      <ad ad-intervals="30" :unit-id="videoAd_id" ad-type="video" ad-theme="white"></ad>
    </view>
  </view>
  <FloatButton />
</template>

<script>
import App from './common.js'
import FloatButton from '@/components/FloatButton.vue'

const interstitialAd = null
export default {
  components: {
    FloatButton
  },
  data() {
    return {
      isOpenAd: false,
      videoAd_id: '',
      interstitialAd_id: '',
      input_url: ''
    }
  },
  // 分享到聊天
  onShareAppMessage() {
    return getShareAppMessageConfig({
      title: '水印处理 - 安记录丨工具舱',
      path: '/pages-sub/remove/index',
      imageUrl: '/static/share-img.png'
    })
  },
  // 分享到朋友圈
  onShareTimeline() {
    return getShareTimelineConfig({
      title: '水印处理 - 安记录丨工具舱',
      imageUrl: '/static/share-img.png'
    })
  },
  onLoad() {
    let _this = this
    uni.getStorage({
      key: 'show_setting',
      success: function (res) {
        // console.log(res.data);
        _this.isOpenAd = res.data['seIsOpenAd']
        _this.videoAd_id = res.data['seAdVideoId']
        _this.interstitialAd_id = res.data['seAdInterstitialId']
        if (_this.isOpenAd) {
          // if (wx.createInterstitialAd) {
          // 	interstitialAd = wx.createInterstitialAd({
          // 		adUnitId: _this.interstitialAd_id
          // 	})
          // 	interstitialAd.onLoad(() => {
          // 		console.log('onLoad event emit')
          // 	})
          // 	interstitialAd.onError((err) => {
          // 		console.log('onError event emit', err)
          // 	})
          // 	interstitialAd.onClose((res) => {
          // 		console.log('onClose event emit', res)
          // 	})
          // }
        }
      }
    })
  },
  onShow() {
    let _this = this
    wx.hideTabBar()
    if (_this.isOpenAd && interstitialAd) {
      interstitialAd.show().catch(err => {
        console.error(err)
      })
    }
  },
  methods: {
    getStrUrl(s) {
      var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g
      var reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g
      s = s.match(reg)
      return s && s.length ? s[0] : null
    },
    getAnalysisDate() {
      let _this = this
      if (_this.input_url == '' || _this.input_url == null) {
        uni.showToast({
          title: '请填写内容后解析哦！',
          icon: 'none',
          duration: 2000
        })
      } else {
        let getUrl = _this.getStrUrl(_this.input_url)
        if (getUrl == null) {
          uni.showToast({
            title: '糟糕！您填写的内容找不到解析地址，无法解析！',
            icon: 'none',
            duration: 2000
          })
          _this.input_url = ''
          return
        }
        uni.showLoading({
          title: '解析中...',
          mask: true
        })
        uni.request({
          url: App.baseURL + getUrl, //仅为示例，并非真实接口地址。
          //   data: {
          //     url: getUrl
          //   },
          success: res => {
            console.log(res)
            uni.hideLoading()
            if (res.data['code'] != 200) {
              console.log(res.data['msg'])
              uni.showModal({
                title: '提示',
                content: '糟糕！解析失败！' + res.data['code'],
                showCancel: false,
                confirmText: '确定',
                success: function (res) {
                  if (res.confirm) {
                    // 执行确认后的操作
                  } else {
                    // 执行取消后的操作
                  }
                }
              })
            } else {
              console.log('进来了', res.data)
              uni.setStorageSync('analysisData', res.data)
              _this.input_url = ''

              _this.jumpPage('/pages-sub/remove/video')
            }
          }
        })
        // App._get("/api/remove/getAnalysisDate", {
        // 	url: getUrl
        // }, res => {
        // 	console.log(res)
        // 	uni.hideLoading()
        // 	if (res.data["code"] != 200) {
        // 		console.log(res.data["msg"])
        // 		uni.showModal({
        // 		        title: '提示',
        // 		        content: res.data["msg"],
        // 				showCancel: false,
        // 		       	confirmText: "确定",
        // 		        success: function(res) {
        // 		        if (res.confirm) {
        // 		            // 执行确认后的操作
        // 		        }
        // 		        else {
        // 		            // 执行取消后的操作
        // 		        }
        // 		    }
        // 		})
        // 	} else {
        // 		console.log("进来了",res.data)
        // 		uni.setStorageSync("analysisData", res.data)
        // 		_this.input_url = ''
        // 		if (res.data["type"] == "video") {
        // 			_this.jumpPage("/pages/remove/video")
        // 		} else {
        // 			_this.jumpPage("/pages/remove/image")
        // 		}
        // 	}
        // })
      }
    },
    tabbarClick(e) {
      let _this = this
      App.tabbarChange(_this.tabbarList[e].pagePath)
    },
    pasteURL() {
      let _this = this
      uni.getClipboardData({
        success: function (res) {
          // console.log(res.data)
          _this.input_url = res.data
        },
        fail(e) {
          console.log(e)
        }
      })
    },
    clearTextarea() {
      let _this = this
      uni.showModal({
        title: '提示',
        content: '确定要清空当前输入框吗？',
        success: res => {
          if (res.confirm) {
            _this.input_url = ''
          }
        }
      })
    },
    jumpPage(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: $u-bg-color;
}

.remove {
  padding: 20rpx 20rpx 20rpx 20rpx;
}

.remove-title-clearButton {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.remove-textarea {
  margin-top: 30rpx;
  border-radius: 25rpx;
  background-color: #f8f8f8;
  box-shadow: 0px 5px 5px 0px #ededed;
}

.remove-clearButton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.remove-title {
  position: relative;
}

.remove-title-shadow {
  position: absolute;
  bottom: -20rpx;
  font-style: italic;
  opacity: 0.4;
  padding-left: 10rpx;
}

.u-textarea[data-v-09988a29] {
  border-radius: 12px;
  background-color: #fff;
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1;
  padding: 9px;
}

.remove-paste-submit-button {
  padding-top: 35rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.remove-paste-button,
.remove-submit-button {
  width: 45%;
  box-shadow: 3px 3px 4px rgba(0, 102, 204, 0.2);
}

.remove-question {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 10rpx;
}

.remove-question-black {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-right: 10rpx;
}

.remove-question-blue {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.ad-show {
  width: 100%;
  padding-top: 30rpx;
}
</style>
